import React, { useState, useEffect } from 'react';
import { Card, Descriptions, Tag, Spin, message, Button, Row, Col } from 'antd';
import { ArrowLeftOutlined, PrinterOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';

// 引入API
import { getSalary } from '../../../api/salary';

const SalaryDetail = () => {
    const { id } = useParams();
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);
    const [salary, setSalary] = useState(null);

    // 状态常量
    const STATUS_MAP = {
        0: '未发放',
        1: '已发放'
    };

    useEffect(() => {
        fetchSalaryDetail();
    }, [id]);

    // 获取薪资详情
    const fetchSalaryDetail = async () => {
        try {
            setLoading(true);
            const response = await getSalary(id);
            setSalary(response.data);
        } catch (error) {
            console.error('获取薪资详情失败:', error);
            message.error('获取薪资详情失败');
        } finally {
            setLoading(false);
        }
    };

    // 返回列表
    const handleBack = () => {
        navigate('/salary');
    };

    // 打印薪资单
    const handlePrint = () => {
        window.print();
    };

    if (loading) {
        return <Spin size="large" className="global-spin" />;
    }

    if (!salary) {
        return (
            <Card>
                <div className="empty-data">
                    <p>未找到薪资记录</p>
                    <Button type="primary" onClick={handleBack}>返回列表</Button>
                </div>
            </Card>
        );
    }

    return (
        <div className="salary-detail-container">
            <Card
                title="薪资详情"
                extra={
                    <div>
                        <Button icon={<ArrowLeftOutlined />} onClick={handleBack} style={{ marginRight: 8 }}>
                            返回
                        </Button>
                        <Button icon={<PrinterOutlined />} onClick={handlePrint}>
                            打印
                        </Button>
                    </div>
                }
            >
                <div className="salary-detail-content">
                    <Descriptions title="基本信息" bordered column={2}>
                        <Descriptions.Item label="员工姓名">{salary.user?.name || '-'}</Descriptions.Item>
                        <Descriptions.Item label="员工ID">{salary.user?.employeeId || '-'}</Descriptions.Item>
                        <Descriptions.Item label="部门">{salary.user?.department?.name || '-'}</Descriptions.Item>
                        <Descriptions.Item label="职位">{salary.user?.position || '-'}</Descriptions.Item>
                        <Descriptions.Item label="薪资月份">{`${salary.year}年${salary.month}月`}</Descriptions.Item>
                        <Descriptions.Item label="状态">
                            <Tag color={salary.status === 1 ? 'green' : 'orange'}>
                                {STATUS_MAP[salary.status] || '未知'}
                            </Tag>
                        </Descriptions.Item>
                        <Descriptions.Item label="发放日期" span={2}>
                            {salary.paymentDate ? new Date(salary.paymentDate).toLocaleDateString() : '-'}
                        </Descriptions.Item>
                    </Descriptions>

                    <div style={{ margin: '24px 0' }}></div>

                    <Row gutter={24}>
                        <Col span={12}>
                            <Card title="收入项" bordered={false}>
                                <Descriptions bordered column={1}>
                                    <Descriptions.Item label="基本工资">¥{salary.baseSalary?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="绩效奖金">¥{salary.bonus?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="加班费">¥{salary.overtime?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="补贴">¥{salary.subsidy?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="其他收入">¥{salary.otherIncome?.toLocaleString() || 0}</Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="扣除项" bordered={false}>
                                <Descriptions bordered column={1}>
                                    <Descriptions.Item label="社保">¥{salary.insurance?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="个人所得税">¥{salary.tax?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="公积金">¥{salary.housingFund?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="请假扣款">¥{salary.leaveDeduction?.toLocaleString() || 0}</Descriptions.Item>
                                    <Descriptions.Item label="其他扣除">¥{salary.otherDeduction?.toLocaleString() || 0}</Descriptions.Item>
                                </Descriptions>
                            </Card>
                        </Col>
                    </Row>

                    <div style={{ margin: '24px 0' }}></div>

                    <Card className="salary-summary">
                        <div className="total-amount">
                            <span className="label">实发工资：</span>
                            <span className="value">¥{salary.netSalary?.toLocaleString() || 0}</span>
                        </div>
                        {salary.remark && (
                            <div className="remark">
                                <span className="label">备注：</span>
                                <span>{salary.remark}</span>
                            </div>
                        )}
                    </Card>
                </div>
            </Card>
        </div>
    );
};

export default SalaryDetail;